import { ConfigProvider, Spin } from 'antd';
import { Link, Outlet, useLocation } from 'react-router-dom';
import locale from 'antd/locale/zh_CN';
import { ProConfigProvider } from '@ant-design/pro-provider';
// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useContext, useEffect, useState } from 'react';

import 'dayjs/locale/zh-cn';
import { PageContainer, ProLayout } from '@ant-design/pro-components';
import { Password } from './Password';
import { FillContext } from './Fill';
import defaultProps from './_defaultProps';
import AppHeader from './AppHeader';

export default function AppProviders() {
  const location = useLocation();
  const [pathname, setPathname] = useState(location.pathname);
  const { loading, loadingText } = useContext(FillContext);

  // const { isLoading, data } = rspc.useQuery(['configs.all', {
  //   arg: null,
  // }]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => {
    console.log(location);
    setPathname(location.pathname);
  });

  // const [settings] = useState<Partial<ProSettings> | undefined>({
  //   layout: 'mix',
  // });

  // useEffect(() => {
  //   const config: {
  //     [key: string]: any
  //   } = {};
  //   data?.forEach((item) => {
  //     console.log(item.value);
  //     const value = JSON.parse(item.value);
  //     config[item.key] = value;
  //   });

  //   setConfig(config);
  // // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [data]);

  return (
    <ConfigProvider locale={locale}>
      {/* <ReactQueryDevtools initialIsOpen={true} /> */}
      <ProConfigProvider>
        <Spin tip={loadingText} spinning={loading}>
          <ProLayout
            {...defaultProps}
            location={{
              pathname,
            }}
            siderWidth={220}
            menu={{
              type: 'group',
            }}
            menuItemRender={(item, dom) => (
              <Link to={item.path || '/'} onClick={() => setPathname(item.path || '/')}>{dom}</Link>
            )}
            // headerTitleRender={() => <AppHeader />}
            // {...settings}
            // menuHeaderRender={() => <AppHeader />}
            locale="zh-CN"
            collapsed={false}
            collapsedButtonRender={false}
            menuHeaderRender={() => <AppHeader />}
          >
            <PageContainer className="page-container" title={false} fixedHeader content={<Password />}>
              <Outlet />
            </PageContainer>
          </ProLayout>
        </Spin>
      </ProConfigProvider>
    </ConfigProvider>
  );
}
